<template>
  <div>
    <div class="left-panel">
      <cube-scroll>
        <cube-tab-bar v-model="selectedLabel" :data="tabs" @change="changeHandler"></cube-tab-bar>
      </cube-scroll>
    </div>
    <div class="right-panel">
      <cube-scroll ref="scroll" v-show="selectedLabel==='全部'">
        <ul>
          <li v-for="(item, index) in indexTable.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="indexTable.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='初步接洽'">
        <ul>
          <li v-for="(item, index) in tableData1.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="tableData1.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='明确需求'">
        <ul>
          <li v-for="(item, index) in tableData2.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="tableData2.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='已报价'">
        <ul>
          <li v-for="(item, index) in tableData3.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="tableData3.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='待付款'">
        <ul>
          <li v-for="(item, index) in tableData4.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="tableData4.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='付款中'">
        <ul>
          <li v-for="(item, index) in tableData5.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="tableData5.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='待出行'">
        <ul>
          <li v-for="(item, index) in tableData6.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="tableData6.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='出行中'">
        <ul>
          <li v-for="(item, index) in tableData7.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="tableData7.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='待回访'">
        <ul>
          <li v-for="(item, index) in tableData8.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="tableData8.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='完成'">
        <ul>
          <li v-for="(item, index) in tableData9.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="tableData9.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
      <cube-scroll ref="scroll" v-show="selectedLabel==='已失效'">
        <ul>
          <li v-for="(item, index) in disableTable.result">
            <div class="title">
              <span class="name">{{item.name}}</span>
              <img v-if="item.sex===1" src="../../assets/mars.svg" style="font-size: 1rem; color: #4285f4;">
              <img v-if="item.sex===0" src="../../assets/venus.svg" style="font-size: 1rem; color: #ea4335;">
              <span class="come-from">{{item.comeFrom}}</span>
              <span class="circle" v-if="item.budgetLevel" :class="[item.budgetLevel?('budgetLevelbgColor'+item.budgetLevel):'']">{{budgetLevelFormat(item.budgetLevel)}}</span>
              <span class="circle" v-if="item.rate" :class="[item.rate?('intentionLevelbgColor'+item.rate):'']">{{intentionLevelFormat(item.rate)}}</span>
            </div>
            <div class="item">
              <span class="tel">{{item.tel}}</span>
              <span class="wx">{{item.wxNickname?(item.wxNickname+'('+item.wxId+')'):''}}</span>
            </div>
            <div class="item">
              <span class="dest">{{item.intentionDestination}}</span>
              <span class="budget">{{item.intentionBudget}}</span>
            </div>
            <div class="item">
              <span class="lastTime">{{timestampFormat(item.followTime, 'mi')}}</span>
              <span class="nextTime">{{item.nextFollowTime?timestampFormat(item.nextFollowTime, 'mi'):'三天内'}}</span>
            </div>
          </li>
          <li class="no-data" v-if="disableTable.result<=0">暂无数据</li>
        </ul>
      </cube-scroll>
    </div>
  </div>
</template>
<script>
  import {timestampFormat} from '@/common/utils'
  import {getCusList, getCusQuery, disableCusList, getIndexList} from '@/api/cusList'
  // const genTabLabels = Object.keys(DATA_MAP).map(label => ({
  //   label
  // }))
  export default {
    data () {
      return {
        indexTable: {},
        tableData1: {},
        tableData2: {},
        tableData3: {},
        tableData4: {},
        tableData5: {},
        tableData6: {},
        tableData7: {},
        tableData8: {},
        tableData9: {},
        disableTable: {},
        searchTable: {},
        indexFilter: {pageNum: 1, pageSize: 10},
        tableFilter1: {param: '1', pageNum: 1, pageSize: 10},
        tableFilter2: {param: '2', pageNum: 1, pageSize: 10},
        tableFilter3: {param: '3', pageNum: 1, pageSize: 10},
        tableFilter4: {param: '4', pageNum: 1, pageSize: 10},
        tableFilter5: {param: '5', pageNum: 1, pageSize: 10},
        tableFilter6: {param: '6', pageNum: 1, pageSize: 10},
        tableFilter7: {param: '7', pageNum: 1, pageSize: 10},
        tableFilter8: {param: '8', pageNum: 1, pageSize: 10},
        tableFilter9: {param: '9', pageNum: 1, pageSize: 10},
        disableFilter: {pageNum: 1, pageSize: 10},
        searchFilter: {param: '', pageNum: 1, pageSize: 10},
        selectedLabel: '全部',
        tabs: [
          {label: '全部'},
          {label: '初步接洽'},
          {label: '明确需求'},
          {label: '已报价'},
          {label: '待付款'},
          {label: '付款中'},
          {label: '待出行'},
          {label: '出行中'},
          {label: '待回访'},
          {label: '完成'},
          {label: '已失效'}
        ]
      }
    },
    created () {},
    mounted () {
      getIndexList(this.indexFilter, (data) => {
        this.indexTable = data.page
      })
    },
    methods: {
      timestampFormat,
      budgetLevelFormat (value) {
        switch (value) {
          case 1:
            return '低'
          case 2:
            return '中'
          case 3:
            return '高'
          default:
            return ''
        }
      },
      intentionLevelFormat (value) {
        switch (value) {
          case 1:
            return '弱'
          case 2:
            return '中'
          case 3:
            return '强'
          default:
            return ''
        }
      },
      changeHandler (label) {
        switch (label) {
          case '全部':
            getIndexList(this.indexFilter, (data) => {
              this.indexTable = data.page
            })
            break
          case '初步接洽':
            getCusList(this.tableFilter1, (data) => {
              this.tableData1 = data.page
            })
            break
          case '明确需求':
            getCusList(this.tableFilter2, (data) => {
              this.tableData2 = data.page
            })
            break
          case '已报价':
            getCusList(this.tableFilter3, (data) => {
              this.tableData3 = data.page
            })
            break
          case '待付款':
            getCusList(this.tableFilter4, (data) => {
              this.tableData4 = data.page
            })
            break
          case '付款中':
            getCusList(this.tableFilter5, (data) => {
              this.tableData5 = data.page
            })
            break
          case '待出行':
            getCusList(this.tableFilter6, (data) => {
              this.tableData6 = data.page
            })
            break
          case '出行中':
            getCusList(this.tableFilter7, (data) => {
              this.tableData7 = data.page
            })
            break
          case '待回访':
            getCusList(this.tableFilter8, (data) => {
              this.tableData8 = data.page
            })
            break
          case '完成':
            getCusList(this.tableFilter9, (data) => {
              this.tableData9 = data.page
            })
            break
          case '已失效':
            disableCusList(this.disableFilter, (data) => {
              this.disableTable = data.page
            })
            break
        }
        this.$nextTick(() => {
          // reset better-scroll'postion
          this.$refs.scroll.scrollTo(0, 0)
          // you need to caculate scroll-content height when your dom has changed in nextTick
          this.$refs.scroll.refresh()
        })
      },
      searchList () {
        getCusQuery(this.searchFilter, (data) => {
          this.searchTable = data.page
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .left-panel /deep/ {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
    background-color: #2d2d2d;
    .cube-scroll-list-wrapper {
      .cube-tab-bar {
        flex-wrap: wrap;
        .cube-tab {
          width: 100%;
          flex-basis: unset;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: #db8931;
          transition: all .3s ease-in;
          &.cube-tab_active {
            color: #fff;
            font-size: 16px;
            background-color: #a74b00;
          }
        }
      }
    }
  }
  .right-panel /deep/ {
    position: absolute;
    top: 0;
    left: 80px;
    right: 0;
    bottom: 0;
    li {
      color: #333;
      .title {
        display: flex;
        align-items: center;
        background-color: #f7f7f7;
        padding: 10px 0 10px 10px;
        color: #999;
        .name {
          font-size: 16px;
        }
        .come-from {
          font-size: 12px;
          margin-left: 20px;
        }
        .circle {
          border-radius: 50%;
          border: 1px solid transparent;
          font-size: 12px;
          font-weight: bold;
          color: #fff;
          padding: 4px;
          margin-left: 20px;
          &:last-of-type {
            margin-left: 5px;
          }
        }
        .budgetLevelbgColor1 {
          border-color: #9cecfb;
          background-color: #9cecfb;
        }
        .budgetLevelbgColor2 {
          border-color: #65c7f7;
          background-color: #65c7f7;
        }
        .budgetLevelbgColor3 {
          border-color: #3a7bd5;
          background-color: #3a7bd5;
        }
        .intentionLevelbgColor1 {
          border-color: #ffd194;
          background-color: #ffd194;
        }
        .intentionLevelbgColor2 {
          border-color: #fdc830;
          background-color: #fdc830;
        }
        .intentionLevelbgColor3 {
          border-color: #f37335;
          background-color: #f37335;
        }
      }
      .item {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 10px;
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .tel {
          width: 40%;
        }
        .wx {
          width: 60%;
          text-align: right;
        }
        .dest {
          width: 70%;
        }
        .budget {
          width: 30%;
          text-align: right;
        }
        .lastTime {
          width: 50%;
        }
        .nextTime {
          width: 50%;
          text-align: right;
        }
      }
      &.no-data {
        font-size: 14px;
        color: #999;
        margin-top: 50%;
        text-align: center;
      }
    }
  }
</style>
